<template>
	<view class="shopping">
		<!-- 顶部结构start -->
		<view class="nav">
			<view class="nav-left common">
				<view class="icon">
					<u-icon name="arrow-left" color="#0c34ba"></u-icon>
				</view>
				<view class="text">
					返回
				</view>
			</view>
			<view class="nav-center common">
				购物袋
			</view>
			<view class="nav-right common " @click="isDeleteSelect = !isDeleteSelect">
				编辑
			</view>
		</view>
		<!-- 顶部结构start -->
		<!-- 背景start -->
		<view class="img-bg">
			<image src="../../static/images/shopbag_bg.png" mode="widthFix" class="img"></image>

		</view>


		<view style="text-align:center;width:100%;height: 600rpx;display: display:flex;align-items: center;"
			v-if="productList.length <= 0">
			<u-empty text="购物车为空" mode="car"></u-empty>
		</view>

		<template v-else>
			<!-- 背景start -->
			<!-- 商品结构 start -->
			<view class="product-box" v-for="(item,index) in productList" :key="index">
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="options">
						<!-- 商品内容 -->
						<view class="product">
							<view class="product-left">
								<u-checkbox size="40" shape="circle" v-model="item.checked"
									@change="checkIdea($event,item)"></u-checkbox>
							</view>
							<view class="product-right">
								<view class="left">
									<image :src="item.small_img" class="img"></image>
								</view>
								<view class="right">
									<view class="title-box">
										<view class="name">
											{{item.name}}
										</view>
										<view class="type">
											{{item.rule}}
										</view>
									</view>
									<view class="enname">
										{{item.enname}}
									</view>
									<view class="price">
										￥{{item.price}}
									</view>
								</view>
							</view>
							<view class="step">
								<u-number-box v-model="item.count" @change="iptMoney($event,index)"></u-number-box>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>

			<!-- 商品结构 start -->
			<!-- 底部结构 start -->
			<view class="foot">
				<view class="foot-left">
					<view class="check">
						<u-checkbox size="40" shape="circle" v-model="checkAll" @change="isCheckAll"></u-checkbox>
					</view>
					<view class="text">
						全选
					</view>
				</view>
				<view class="foot-right">
					<template v-if="!isDeleteSelect">
						<view class="text">
							合计:
						</view>
						<view class="price">
							￥{{moneyAll}}.00
						</view>
					</template>
					<view class="btn-box">
						<u-button type="primary" shape="circle" v-if="!isDeleteSelect" @click="usePutOrder">提交订单</u-button>
						<u-button type="error" shape="circle" v-else @click="isClearModal = true">删除选择</u-button>
					</view>
				</view>
			</view>
			<!-- 底部结构 start -->

			<!-- 清空购物车模态框 -->
			<u-modal v-model="isClearModal" @confirm="useClearAllCar" show-cancel-button content="是否删除该商品？"></u-modal>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isClearModal: false, // 清空购物车模态框
				isDeleteSelect: false, // 删除选择
				value: 1,
				checkAll: false,
				// item滑动显示删除
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				// 商品列表
				productList: [],
				moneyAll: 0,
				// 勾选的商品
				checkedList: []
			}
		},
		onShow() {
			this.getProduct()
		},
		methods: {
			// 提交订单
			usePutOrder(){
				uni.navigateTo({
					url:'./order'
				})
			},

			// 移除购物车
			useClearAllCar() {
				// 勾选的商品
				let checkedProductList = []
				this.productList.forEach(item => {
					if (item.checked) {
						checkedProductList.push(item.sid)
					}
				})

				this.$request({
					url: '/removeShopcart',
					method: 'POST',
					data: {
						'sids': JSON.stringify(checkedProductList)
					},
					success: res => {
						if (res.data.code == 7000) {
							this.getProduct()
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: 'none'
							})
						}
					}
				})
			},

			// 获取购物车详情
			getProduct() {
				this.$request({
					url: "/findAllShopcart",
					success: (res) => {
						let {
							result
						} = res.data
						result.forEach(v => {
							v.checked = false
						})
						this.productList = result

					}
				})
			},
			//全选逻辑
			isCheckAll(e) {
				this.checkAll = e.value
				this.productList.forEach(v => {
					v.checked = this.checkAll
				})
				if (e.value) {
					this.productAll()
				} else {
					this.moneyAll = 0
				}
			},
			//单选 逻辑
			checkIdea(e, item) {
				// console.log(e,item)
				// 将勾选的商品编号加入到 勾选列表中
				// this.checkedList.forEach(item =>{
				// 	if(item == item.sid){
				// 		this.checkedList.push(item.sid)
				// 	}
				// })

				item.checked = e.value
				if (e.value) {
					this.addMoney(item)
				} else {
					this.delMoney(item)
				}
				for (let i = 0; i < this.productList.length; i++) {
					//判断 是否为 勾选状态
					if (!this.productList[i].checked) {
						//有一个 未勾选 全选就不能 选中
						this.checkAll = false
						return
					}
					this.checkAll = true
				}

			},
			//加金额
			addMoney(item) {
				let num = item.count * parseInt(item.price)
				this.moneyAll += num
			},
			//减金额
			delMoney(item) {
				let num = item.count * parseInt(item.price)
				this.moneyAll -= num
			},
			// 初次化金额
			iptMoney(e, index) {
				this.productList[index].count = e.value
				this.productAll()
			},
			// 结算总计
			productAll() {
				let sum = 0
				for (let i = 0; i < this.productList.length; i++) {
					if (this.productList[i].checked) {
						sum += this.productList[i].count * parseInt(this.productList[i].price)
					}
				}
				this.moneyAll = sum
			}
		},
	}
</script>

<style lang="less" scoped>
	.shopping {
		height: 100vh;
		background-color: #f2f2f2;

		.nav {
			height: 100rpx;
			font-size: 34rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;

			.nav-left {
				display: flex;
				justify-content: center;
				flex: 2;

				.icon {}

				.text {
					color: #0c34ba;
					margin-left: 10rpx;
				}
			}

			.nav-center {
				font-size: 38rpx;
				flex: 6;
			}

			.nav-right {
				flex: 2;
			}

			.common {
				text-align: center;

			}
		}

		.img-bg {
			width: 100%;
			margin-top: 100rpx;

			.img {
				width: 100%;
				display: block;
			}
		}

		.product-box {
			border-radius: 20rpx;
			padding: 20rpx;
			margin: 30rpx;
			background-color: #fff;

			.product {
				position: relative;
				display: flex;
				align-items: center;

				.product-left {
					::v-deep .u-checkbox {
						width: 55rpx;
					}
				}

				.product-right {
					display: flex;

					.left {
						width: 170rpx;
						height: 170rpx;

						.img {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						margin-left: 30rpx;

						.title-box {
							display: flex;

							.name {
								font-size: 34rpx;
							}

							.type {
								font-size: 24rpx;
								margin-left: 30rpx;
							}
						}

						.enname {
							color: gray;
							width: 400rpx;
							font-size: 24rpx;
							margin: 20rpx 0;
							margin-top: 10rpx;
							text-align: start;
							display: -webkit-box;
							white-space: pre-wrap;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}

						.price {
							color: #0c34ba;
							font-size: 32rpx;
							font-weight: bold;
						}
					}
				}

				.step {
					position: absolute;
					bottom: 10rpx;
					right: 10rpx;

					::v-deep .u-icon-plus {
						width: 50rpx !important;
						color: #fff !important;
						border-radius: 50%;
						background-color: #0c34ba !important;
					}

					::v-deep .u-icon-disabled {
						width: 50rpx !important;
						color: #b8c3eb !important;
						border: 2rpx solid #b8c3eb;
						border-radius: 50%;
					}

					::v-deep.u-icon-minus {
						width: 50rpx !important;
						color: #b8c3eb !important;
						border: 2rpx solid #b8c3eb;
						border-radius: 50%;
					}

					::v-deep .uni-input-input {
						background-color: #fff;
					}
				}
			}

		}

		.foot {
			position: fixed;
			bottom: 110rpx;
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.foot-left {
				display: flex;
				align-items: center;

				.check {}

				.text {}
			}

			.foot-right {
				width: 500rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.text {}

				.price {}

				.btn-box {
					margin-left: 40rpx;
				}

			}
		}

	}
</style>
